<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>src</title>
    <link rel="stylesheet" type="text/css" href="/static/loading-bar/loading-bar.css">
    <link rel="shortcut icon " type="images/x-icon" href="/static/logo.png">
    <script type="text/javascript" src="/static/loading-bar/loading-bar.js"></script>
  </head>
  <body>
    <div id="loading-area">
        <div id="loading" class="no-label label-center" style="width: 150px; height: 150px; opacity: 0"></div>
    </div>
    <style type="text/css">
        #loading-area {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999;
            background: white;
            -webkit-transition: opacity .7s, z-index .7s;
               -moz-transition: opacity .7s, z-index .7s;
                -ms-transition: opacity .7s, z-index .7s;
                 -o-transition: opacity .7s, z-index .7s;
                    transition: opacity .7s, z-index .7s;
        }
        #loading {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            -webkit-transition: opacity .5s;
               -moz-transition: opacity .5s;
                -ms-transition: opacity .5s;
                 -o-transition: opacity .5s;
                    transition: opacity .5s;
        }
    </style>
    <script>
        void function() {
            var duration = 1, startTimeStamp;
            window.loadingBar = new ldBar("#loading", {
                preset: 'bubble',
                duration: duration
            });

            document.addEventListener('DOMContentLoaded', function() {
                startLoading().then(function() {
                    loadTo(33);
                });
            });
            window.loadTo = function(value) {
                loadingBar.set(Math.max(loadingBar.value, value));
            }
            window.startLoading = function() {
                document.getElementById('loading').style.opacity = 1;
                return new Promise(function(resolve, reject) {
                    startTimeStamp = Date.now();
                    setTimeout(resolve);
                });
            };
            window.appStart = function() {
                window.loadingBar.set(100);
                setTimeout(function() {
                    var loadingArea = document.getElementById('loading-area');
                    loadingArea.style.opacity = '0';
                    loadingArea.style.zIndex = -1;
                    setTimeout(function() {
                        loadingArea.style.display = "none";
                    }, 1000);
                }, duration * 1000);
            };


        }();
    </script>
    <div id="app"></div>
    <link rel="stylesheet" href="/static/css/Material/index.css">
    <link rel="stylesheet" href="/static/css/animate.min.css">
    <!-- built files will be auto injected -->
  </body>
</html>
